<template>
  <el-card>
    <el-form ref="form" :model="formData" label-width="230px" class="top" :rules="rules">
      <el-tabs v-model="activeName">
        <el-tab-pane label="基础信息" name="first">
          <!-- from表单 -->
          <!-- 标题 -->
          <el-row>
            <el-form-item label="标题" prop="title">
              <el-input v-model="formData.title" size="small" class="one">
                <template slot="append">
                  <el-button type="primary" size="small">重置</el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-row>
          <!-- 作者，分类 -->
          <el-row type="flex">
            <el-form-item label="作者" prop="author">
              <el-input v-model="formData.author" size="small" />
            </el-form-item>
            <el-form-item label="分类" prop="cateid">
              <el-select v-model="formData.cateid" placeholder="" size="small">
                <el-option
                  v-for="item in catename"
                  :key="item.id"
                  :label="item.catename"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-row>
          <!-- 阅读，创建时间 -->
          <el-row type="flex">
            <el-form-item label="阅读次数" prop="click">
              <template>
                <el-input-number v-model="formData.click" class="number" size="small" :min="1" :max="1000000" label="描述文字" />
              </template>
            </el-form-item>
            <el-form-item label="创建时间" prop="create_date">
              <div class="block">
                <el-date-picker
                  v-model="formData.create_date"
                  type="datetime"
                  placeholder="选择日期时间"
                  @change="change"
                />
              </div>
            </el-form-item>
          </el-row>
          <!-- 推荐开关 -->
          <el-row type="flex">
            <el-form-item label="是否推荐" class="margins" prop="ishot">
              <el-switch
                v-model="formData.ishot"
                active-text="否"
                inactive-text="是"
                :active-value="1"
                :inactive-value="0"
                class="switch"
              />
            </el-form-item>
            <el-form-item label="是否置顶" prop="istop">
              <el-switch
                v-model="formData.istop"
                active-text="否"
                inactive-text="是"
                :active-value="1"
                :inactive-value="0"
              />

            </el-form-item>
          </el-row>
          <!-- 收藏数量 -->
          <el-form-item label="收藏数量" prop="lovenum">
            <el-input v-model="formData.lovenum" size="small" style="width:185px" />
          </el-form-item>
          <!-- 上传图片 -->
          <el-form-item label="文章缩略图" prop="pic">
            <el-upload
              v-model="formData.pic"
              class="upload-demo"
              :http-request="httpRequest"
              action="#"
              :file-list="fileList"
              list-type="picture"
            >
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
          <!-- 文章权限 -->
          <el-form-item label="文章标签" style="width:1300px" prop="tags">
            <template>
              <el-checkbox-group v-model="formData.tags">
                <el-checkbox v-for="item in list" :key="item.id" :label="item.tagname">
                  {{ item.tagname }}
                </el-checkbox>
              </el-checkbox-group>
            </template>
          </el-form-item>
        </el-tab-pane>
        <!-- ----------------------------------基础信息------------------------------- -->
        <!-- from表单 -->
        <el-tab-pane label="SEO信息" name="second">
          <el-form ref="form" class="top" :model="formData" label-width="230px" :rules="rules">
            <!-- seo关键字 -->
            <el-form-item label="seo关键字" style="width:1150px" prop="keywords">
              <el-input
                v-model="formData.keywords"
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
              />
            </el-form-item>
            <!-- seo的 描述 -->
            <el-form-item label="seo的 描述" style="width:1150px" prop="description">
              <el-input
                v-model="formData.description"
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
              />
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <!-- ----------------------------------seo------------------------------- -->
        <el-tab-pane label="文章内容" name="third">
          <!-- 富文本编辑器 -->
          <el-form-item label="文章内容" style="width:1150px">
            <quillEditor />
          </el-form-item>

        </el-tab-pane>
        <!-- 三个按钮 -->
        <el-row type="flex" justify="center">
          <template>
            <el-button type="success" size="small" @click="PublishImmediately">立即发布</el-button>
            <el-button type="primary" size="small">保存草稿</el-button>
            <el-button type="warning" size="small">返回列表</el-button>
          </template>
        </el-row>
      </el-tabs>

    </el-form>
  </el-card>
</template>
<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'
import { UploadFile } from '@/api/user'
import { getContentTagAllListApi, getContentCateAllListApi } from '@/api/contentinfo'
import { getarticleInfoApi, addarticleInfoApi, updatearticleInfoApi } from '@/api/content'
export default {
  name: 'Info',
  components: {
    quillEditor // 富文本编辑器
  },
  data() {
    return {
      userId: this.$route.params.id,
      list: [],
      checkList: [], // 所有的文章标签
      fileList: [], // 回显图片
      checked: false,
      catename: [], // 分类
      value: true, // 是否推荐
      value1: true, // 是否置顶
      num: 1, // 计数器绑定的值
      activeName: 'first',
      formData: {
        author: '', // 作者
        cateid: '', // 分类id
        // catename: '', // 分类名称
        click: '', // 点击次数
        content: '<p>5</p>', // 文章内容
        create_date: '', // 创建时间
        // default_data: '1',
        description: '', // seo描述
        id: '', // id
        ishot: '', // 推荐
        istop: '', // 置顶
        keywords: '', // seo关键字
        lovenum: '', // 喜欢数量
        pic: '', // 图片链接
        status: '', // 状态
        tags: [], // 标签
        title: '' // 文章标题
        // update_date: '' // 更新时间
        // user_id: '' // 用户
      },
      // 校验规则
      rules: {
        title: [{ required: true, message: '请输入', trigger: 'blur' }],
        author: [{ required: true, message: '请输入', trigger: 'blur' }],
        advpossize: [{ required: true, message: '请输入', trigger: 'blur' }],
        catename: [{ required: true, message: '请输入', trigger: 'blur' }],
        click: [{ required: true, message: '请输入', trigger: 'blur' }],
        create_date: [{ required: true, message: '请输入', trigger: 'blur' }],
        ishot: [{ required: true, message: '请输入', trigger: 'blur' }],
        istop: [{ required: true, message: '请输入', trigger: 'blur' }],
        lovenum: [{ required: true, message: '请输入', trigger: 'blur' }],
        pic: [{ required: true, message: '请输入', trigger: 'blur' }],
        tags: [{ required: true, message: '请输入', trigger: 'blur' }],
        keywords: [{ required: true, message: '请输入', trigger: 'blur' }],
        description: [{ required: true, message: '请输入', trigger: 'blur' }],
        content: [{ required: true, message: '请输入', trigger: 'blur' }]
      }
    }
  }, created() {
    this.getContentTagAllListApi()
    this.getContentCateAllListApi()
    if (this.userId) {
      this.getarticleInfoApi(this.userId)
    }
  },
  methods: {
    // 立即发布
    async  PublishImmediately() {
      if (this.userId) {
        // 修改
        this.formData.tags = this.formData.tags.join(',')
        await updatearticleInfoApi(this.formData)
        this.$message.success('编辑成功')
        this.$refs.form.clearValidate()
        this.$router.back()
      } else {
      // 新增
        await this.$refs.form.validate()
        await addarticleInfoApi(this.formData)
        this.$message.success('发布成功')
        this.$refs.form.clearValidate()
        this.$router.back()
      }
    },
    // changecheCkout复选框自定义事件
    // changecheCkout(tags) {
    //   // 点击到的值给formData.tags
    //   // console.log(tags)
    //   // 数组转字符串
    //   this.formData.tags = tags.join(',')
    // },
    // 拿到时间转时间戳
    change(node) {
      // 将时间转时间戳
      const sj = new Date(node).getTime()
      this.formData.create_date = sj
    },
    // 自定义上传图片
    async  httpRequest(rouls) {
      const fd = new FormData()
      fd.append('file', rouls.file)
      const res = await UploadFile(fd)
      this.formData.pic = res.savePath
    },
    // 获取分类
    async getContentCateAllListApi() {
      const res = await getContentCateAllListApi()
      this.catename = res
    },
    // 全部数据,做回显
    async getarticleInfoApi(id) {
      const res = await getarticleInfoApi({ id })
      console.log(res)
      this.formData = res
      this.formData.tags = this.formData.tags.split(',')
      console.log(this.formData.tags)
    },
    // 获取所有文章标签
    async getContentTagAllListApi() {
      const res = await getContentTagAllListApi()
      this.list = res
      console.log(res)
    }

  }
}
</script>
<style>
.top{
  margin-top: 20px;
}
.one{
  width: 900px;
}
.number{
  width: 185px;
}
/* .switch{
  margin: 0 5px;
} */
.margins{
  margin-right: 108px;
}
</style>
